<template>
    <div class="page">
        <!-- 头部 -->
        <div class="header">
            <div class="header-con">
                <div class="header-back">
                    <router-link to="/home">
                        <span class="back">
                            <i class="iconfont">&#xe604;</i> home
                        </span>
                    </router-link>
                </div>

            </div>
        </div>
        <!-- 游戏面板 -->
        <div class="body">
            <div class="home">
                <h1 class="title">
                    MineSweeper
                </h1>
                <ul class="opation">
                    <li key="1">
                        <router-link to="/select">Play</router-link>
                    </li>
                    <li key="2">
                        <router-link to="/statement">Stats</router-link>
                    </li>
                    <li key="3">
                        <router-link to="/statement">Setting</router-link>
                    </li>
                    <li key="4">
                        <router-link to="/statement">About</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Home"
};
</script>

<style scoped lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: inherit;
    height: 40px;
    border: 1px solid #48525a;
    border-left: none;
    border-right: none;
    color: azure;
  }
  /*页头部样式*/
  .header-con {
    width: 100%;
    height: inherit;
    display: flex;
    flex-direction: row;
    .header-back {
      width: 60px;
      height: inherit;
      padding: 0 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .back {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 2px 5px;
      border-radius: 2px;
      background: #545159;
      cursor: pointer;
      color: #fbfbfb;
      > i {
        color: #29f5a6;
      }
    }
  }
  .body {
    width: inherit;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
}

.home {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #929292;
  }
  .opation {
    width: 70%;
    > li {
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin: 10px auto;
      border-radius: 5px;
      overflow: hidden;
      transition: all 0.3s;
      background: rgba(0, 0, 0, 0);
      &:active,
      &:hover {
        background: rgba(0, 0, 0, 0.5);
      }
      > a {
        display: block;
        height: 100%;
        width: 100%;
        color: #dadada;
      }
    }
  }
}
</style>



